<template>
  <el-dialog title="发起会议" :visible.sync="isOpen" width="600px" append-to-body>
    <el-form ref="form" :model="forms" :rules="rules" label-width="120px">
      <el-form-item label="会议名称" prop="name">
        <el-input v-model="forms.name" placeholder="请输入会议名称"></el-input>
      </el-form-item>
      <el-form-item label="会议类型" prop="types">
        <el-select v-model="forms.types" placeholder="请选择会议类型" clearable :style="{ width: '100%' }">
          <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label"
            :value="item.value" :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="会议目的" prop="objective">
        <el-input v-model="forms.objective" placeholder="请输入会议目的"></el-input>
      </el-form-item>
      <el-form-item label="开始时间" prop="objective">
        <el-date-picker style="width: 100%;" v-model="forms.start_time" type="datetime" placeholder="选择日期时间"
          default-time="8:00:00">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="主持人" prop="compere">
        <el-select v-model="forms.compere" placeholder="请选择会议类型" clearable :style="{ width: '100%' }">
          <el-option v-for="(item, index) in peopleOptions" :key="index" :label="item.label"
            :value="item.value" :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="与会部门" prop="compere">
        <el-select v-model="forms.department" placeholder="请选择会议类型" clearable :style="{ width: '100%' }">
          <el-option v-for="(item, index) in departmentOptions" :key="index" :label="item.label"
            :value="item.value" :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="与会人员" prop="users">
        <el-select v-model="forms.users" placeholder="请选择会议类型" clearable :style="{ width: '100%' }">
          <el-option v-for="(item, index) in peopleOptions" :key="index" :label="item.label"
            :value="item.value" :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false,
      forms: {
        name: "",
        types: "",
        objective: "",
        start_time: "",
        compere: "",
        department: [],
        users: []
      },
      typeOptions: [
        {
          label: "普通会议",
          value: 1,
        },
        {
          label: "决议会议",
          value: 2,
        },
        {
          label: "调研会",
          value: 2,
        },
      ],
      peopleOptions: [],
      departmentOptions: [],
      // 弹框
      rules: {
        name: [{ required: true, message: "请输入会议名称", trigger: "blur" }],
        objective: [{ required: true, message: "请输入会议目的", trigger: "blur" }],
        start_time: [{ required: true, message: "请请选择会议开始时间", trigger: "blur" }],
        compere: [{ required: true, message: "请请选择会议主持人", trigger: "blur" }],
        department: [{ required: true, message: "请请选择参与会议的部门", trigger: "blur" }],
        users: [{ required: true, message: "请请选择参与会议的人员", trigger: "blur" }],
      },
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  methods: {
    // 表单重置
    reset() {
      this.forms = {
        types: "",
        remark: "",
      };
      this.resetForm("form");
    },
    // 取消按钮
    close() {
      this.isOpen = false;
      this.reset();
    },
    // 打开弹框
    open() {
      this.isOpen = true;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
        }
      });
    },
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>